<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="left" title="竞彩足球" rightText="帮助" style="font-weight: 600;"
			color="#ffffff" background-color="rgb(255, 61, 0)" @clickLeft="onClickLeft" @clickRight="onClickRight">
		</uni-nav-bar>
		<!-- tab -->
		<su-sticky bgColor="#fbe5e5">
			<su-tabs :activeStyle="{color:'red'}" :lineWidth="60" :list="state.tabMaps" :scrollable="true"
				:current="state.currentTab" @change="onTabsChange">
			</su-tabs>
		</su-sticky>

		<football-mix v-if="state.currentTab===0" @data-update="handleData" />

		<football-spf2x v-if="state.currentTab===1" @data-update="handleData" />

		<football-danguan v-if="state.currentTab===2" @data-update="handleData" />

		<!-- 防止最后的比赛看不到，添加一个view 暂时没有好的解决办法，后期有时间再优化 、-->
		<view style="height: 100px;"></view>
		<view class="bottom-bar">
			<view class="bet_bl">
				<view class="left" @click="openGuoguan">
					<image src="@/static/images/del.png"></image>
					<view v-if="state.passInfo.pass">
						已选
						<text class="font-red">{{state.passInfo.selectNum}}</text>
						场
					</view>
					<view v-else style="font-size: 10px;">非<text class="font-red">单关</text>至少选2场</view>
				</view>
				<view
					style="border-left: 1px solid #eaeaea;padding-left:5px;width: 110px;color: red;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
					@click="openGuoguan">
					{{state.passTip}}
				</view>
				<view style="border-right: 1px solid #eaeaea;" @click="openGuoguan">
					<text :class="state.showGuoguanModel?'cicon-drop-up':'cicon-drop-down'" style="font-size: 25px;" />
				</view>
				<view style="display: flex;justify-items: flex-start;">
					<text>倍数</text>
					<view style="margin-top: 11px;padding-right: 5px;margin-left: 3px;">
						<uni-number-box v-model="state.buyNum" :min="1" />
					</view>
				</view>
			</view>
			<view class="bottom-bar-foot">
				<view class="center">
					<p v-if="state.calBonus">[<text style="color: #f60;">{{state.calBonus.totalNum}}</text>注]
						<text class="font-red">{{state.buyNum}}</text>倍
						<text class="font-red">{{state.calBonus.totalMoney}}</text>
						元
					</p>
					<text v-else>请选择2场以上</text>
					<p>预计奖金：
						<text style="color: #f60;"
							v-if="state.calBonus.maxBonus">{{state.calBonus.minBonus}}~{{state.calBonus.maxBonus}}</text>
						<text style="color: #f60;" v-else>0</text>
					</p>
				</view>
				<view class="right">
					<view v-if="state.calBonus.totalMoney" style="text-align: center;font-size: 13px;margin-right: 7px;">
						<view  style="border: 1px solid red;color: red;border-radius: 5px;padding: 2px 2px;">
							优化奖金
						</view>
						<view style="margin-top: 5px;"><text style="color: #fff;background-color: #f60;width: 20px; padding: 2px 3px;">均</text></view>
					</view>
					<button type="primary" :disabled="state.calBonus.totalMoney>0?false:true">下一步</button>
				</view>
			</view>
		</view>

		<!-- 比赛场次选择弹窗 -->
		<su-popup :show="state.showGuoguanModel" type="bottom" round="10" @change="guoguanModelChange" :space="100"
			:zIndex="6000" :showClose="true">
			<view class="betting-popup">
				<!-- Header -->
				<view class="popup-header">
					<text class="icon-check-round"></text>
					<view class="popup-title">
						<text>足球竞猜</text>
					</view>

				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 5px;padding: 3px 3px;">
					<view class="multiplier">
						<text>已选</text>
						<text class="multiplier-value">{{state.passInfo.selectNum}}</text>
						<text>场</text>
					</view>
					<view class="multiplier">
						<text>过关</text>
						<text class="multiplier-value">{{state.passTip}}</text>
					</view>
					<view class="multiplier">
						<text>倍数</text>
						<text class="multiplier-value">{{state.buyNum}}</text>
					</view>
				</view>
				<!-- Content -->
				<scroll-view class="popup-content" scroll-y>
					<!-- Selected matches section -->
					<view class="selected-matches">
						<!-- Match 1 -->
						<view class="match-item" v-for="sel_match in state.calBonus.selectBonusList">
							<view class="match-header">
								<text class="match-code">{{sel_match.matchNumStr}}</text>
								<view class="match-info">
									<view class="team-name"><text style="margin-right: 3px;color: #999;">[主]</text>{{sel_match.homeTeamAbbName}}</view>
									<view class="match-time">
										<text class="match-date">{{sel_match.matchDateStr}}</text>
										<text class="match-hour">{{sel_match.matchTime}}</text>
									</view>
									<view class="team-name">{{sel_match.awayTeamAbbName}}</view>
								</view>
							</view>
							<table class="bordered-table">
								<tr v-for="(value,key) of sel_match.gameMap" :key="key">
									<td style="width: 20%;">{{key}}</td>
									<td>
										<view class="bet-options" v-for="bs in value">
											<view class="bet-option" v-for="bbs in bs.bonusList">
												<view class="option-content">
													<text class="option-name">
														{{bbs.bonus.n}} 
														<text style="margin-left: 3px;">
															{{bbs.bonus.v}}
														</text>
													</text>
												</view>
											</view>
										</view>
									</td>
								</tr>
							</table>
						</view>
					</view>
				</scroll-view>
				<view class="chooseBox bet-summary">
					<view>
						<p style="margin-bottom: -8px; padding-top: 20px; color: rgb(0, 0, 0); font-weight: 600;">
							过关方式(多选)</p>
					</view>
					<view class="top freepass">
						<view class="radio_cell" :class="p.x?'active':''" v-for="(p,index) in state.passInfo.pass" @click="selectGuoguan(p)"
							>{{p.n}}</view>
					</view>
				</view>
			</view>
		</su-popup>

	</view>
</template>


<script setup>
	import sheep from '@/sheep';
	import {
		getBonus
	} from '@/sheep/helper/lottery';
	import FootballApi from '@/sheep/api/sporttery/football';
	import footballMix from './components/football-mix.vue';
	import footballSpf2x from './components/football-spf2x.vue';
	import footballDanguan from './components/football-danguan.vue';
	import footballData from './components/football-data.vue';
	import {
		onLoad,
		onPageScroll,
		onReachBottom,
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref,
		watch
	} from 'vue';
	import SuSticky from '@/sheep/ui/su-sticky/su-sticky.vue';
	import SuTabs from '@/sheep/ui/su-tabs/su-tabs.vue';
	import UniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
	import SuPopup from '@/sheep/ui/su-popup/su-popup.vue';
	import router from '@/sheep/router';

	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;

	onPageScroll((e) => {
		state.scrollTop = e.scrollTop <= 100;
	});


	//处理收到混合页面子组件数据
	function handleData(data) {
		state.passInfo.selectNum = data.selectNum;
		state.passInfo.selectMatchs = data.selectMatchs;
	}
	const state = reactive({
		showGuoguanModel: false,
		showHasSelectMatchModel: false,
		currentTab: 0,
		buyNum: 1,
		tabMaps: [{
			name: '混合投注',
			value: 0,
		}, {
			name: '2选1',
			value: 1,
		}, {
			name: '决胜单关',
			value: 2,
		}, ],
		passInfo: {
			pass: [],
			selectNum: 0,
			selectMatchs: {}
		},
		passTip: "请选择比赛",
		calBonus: {
			beiNum: 1,
			buySchemeList: [],
			guoguans: [],
			maxBonus: 0,
			minBonus: 0,
			selectBonusList: [],
			selectNum: 0,
			totalMoney: 0,
			totalNum: 0
		},
		calStatus:false//计算状态
	});
	// 监听 倍数 数据（多数据属性监控）
	watch([() => state.buyNum, () => state.passInfo.selectMatchs], ([newn, newv], [oldn, oldv]) => {
		//计算奖金
		console.log("监听 倍数 数据")
		calculateBonus(true);

	}, {
		deep: true
	})

	//选择 过关
	function selectGuoguan(p){
		p.x=p.x?false:true;
		calculateBonus(false);
	}

	// 切换选项卡
	function onTabsChange(e) {
		state.currentTab = e.index;
	}

	// 左侧按钮：返回上一页或首页
	function onClickLeft() {
		const hasHistory = sheep.$router.hasHistory();
		if (hasHistory) {
			sheep.$router.back();
		} else {
			sheep.$router.go('/pages/index/index');
		}
	}

	// 右侧按钮：打开快捷菜单
	function onClickRight() {
		console.log('点击帮助了');
		sheep.$router.go('/pages/help/help');
	}

	function guoguanModelChange(e) {
		state.showGuoguanModel = e.show;
	}

	function matchHasSelectModelChange(e) {
		state.showHasSelectMatchModel = e.show;
	}

	//打开过关方式选择
	function openGuoguan() {
		if (state.showGuoguanModel) {
			state.showGuoguanModel = false;
		} else {
			state.showGuoguanModel = true;
		}
	}

	//打开选择那些投注选项弹出框
	function openHasSelect() {
		if (state.showHasSelectMatchModel) {
			state.showHasSelectMatchModel = false;
		} else {
			state.showHasSelectMatchModel = true;
		}
	}

	// 获取订单列表
	async function getOrderList() {
		state.loadStatus = 'loading';
		const tab = tabMaps[state.currentTab];
		const queryParams = {
			pageSize: state.pagination.pageSize,
			pageNo: state.pagination.pageNo,
			bizType: 1, // 获得推广佣金
			status: tab.value,
		};
		if (tab.value < 0) {
			delete queryParams.status;
		}
		const {
			code,
			data,
		} = await BrokerageApi.getBrokerageRecordPage(queryParams);
		if (code !== 0) {
			return;
		}
		state.pagination.list = _.concat(state.pagination.list, data.list);
		state.pagination.total = data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
		if (state.currentTab === 0) {
			state.totals = data.total;
		}
	}

	//计算奖金
	async function calculateBonus(ispass) {
		if(state.calStatus){
			return
		}
		state.calStatus = true;
		//计算奖金
		let matchs = []
		for (const [key, values] of state.passInfo.selectMatchs) {
			for (const v of values) {
				let m = {
					matchId: key,
					c: v.selectItem.c
				};
				matchs.push(m);
			}
		}
		let req = {
			matchs: matchs,
			guoGuans: state.passInfo.pass || [],
			num: state.buyNum
		}
		
		const {
			code,
			data
		} = await FootballApi.calculateBonus(req);
		if (code !== 0) {
			state.calStatus = false;
			return;
		}
		state.calBonus = data;
		//需要更新过关信息
		if (ispass && data.guoguans&&data.guoguans.length!=state.passInfo.pass.length) {
			state.passInfo.pass = data.guoguans;
		}
		//更新过关显示
		state.passTip = "请选择比赛"
		if (data.guoguans) {
			let arr = new Array();
			for (const p of data.guoguans) {
				if (p.x) {
					arr.push(p.n)
				}
			}

			if (arr.length) {
				state.passTip = arr.join("、");
			}
		}
		state.calStatus = false;

	}


	onLoad(() => {});

	// 加载更多
	function loadMore() {
		if (state.loadStatus === 'noMore') {
			return;
		}
		state.pagination.pageNo++;
	}

	// 上拉加载更多
	onReachBottom(() => {
		loadMore();
	});

	function removeOption(matchCode, optionName) {
		console.log(`Removing ${optionName} from match ${matchCode}`);
	}

	function closePopup() {
		this.state.showMatchModel = false;
	}
</script>


<style lang="scss" scoped>
	//选择赛事弹出框
	.betting-popup {
		display: flex;
		flex-direction: column;
		height: 70vh;
	}

	.popup-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
	}

	.popup-title {
		font-size: 30rpx;
		margin-top: 10rpx;
		font-weight: bold;
	}

	.popup-content {
		flex: 1;
		overflow-y: auto;
	}

	.selected-matches {
		padding: 0 20rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 20rpx;
	}

	.match-item {
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx dashed #eee;
	}

	.match-header {
		display: flex;
		align-items: center;
	}

	.match-code {
		font-size: 26rpx;
		color: #999;
		margin-right: 20rpx;
		min-width: 80rpx;
	}

	.match-info {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.team-name {
		font-size: 26rpx;
		flex: 1;
		text-align: center;
	}

	.match-time {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 20rpx;
		min-width: 100rpx;
	}

	.match-date {
		font-size: 24rpx;
		color: #666;
	}

	.match-hour {
		font-size: 24rpx;
		color: #666;
	}

	.bet-options {
		display: flex;
		flex-wrap: wrap;
	}

	.bet-option {
		display: flex;
		margin-right: 13rpx;
		margin-bottom: 5px;
		font-size: 26rpx;
		border-radius: 6rpx;
		overflow: hidden;
		position: relative;
		// padding-right: 30rpx;
		/* Space for delete button */
	}

	.option-content {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
	}

	.option-name {
		background-color: #FF4D4F;
		color: white;
		padding: 8rpx 8rpx;
		width: 65px;
	}

	.option-odds {
		background-color: #f5f5f5;
		padding: 8rpx 15rpx;
		width: 35px;
	}

	.delete-btn {
		position: absolute;
		right: 10rpx;
		top: 0;
		color: #999;
		background-color: #EFE8E8FF;
		border-radius: 50%;
		font-size: 28rpx;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
	}

	.bet-summary {
		padding: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.summary-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
		font-size: 28rpx;
	}

	.multiplier {
		display: flex;
		align-items: center;
	}

	.multiplier-value {
		margin-left: 15rpx;
		color: #f60;
		font-weight: bold;
	}

	.bet-details {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
	}

	.prize-range {
		color: #f60;
		margin-top: 10rpx;
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx 20rpx;
	}

	.action-buttons button {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 8rpx;
		font-size: 32rpx;
		flex: 1;
		border: none;
	}

	// 已选赛事样式结束

	.font-red {
		color: red;
	}

	.nav-bar-title {
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		text-align: center;
		padding-left: 26%;
		padding-top: 10px;
	}

	.bottom-bar {
		width: 100vw;
		position: fixed;
		z-index: 7000;
		right: 0;
		bottom: 0;
		background-color: white;
	}

	.bet_bl {
		height: 46px;
		line-height: 46px;
		text-align: center;
		box-shadow: 0 -1px 4px 0 rgb(168 167 167 / 25%);
		font-size: 14px;
		font-weight: 400;
		color: #444;
		border-bottom: 1px solid #d9d5d5;
		display: flex;
		justify-content: space-between;
	}

	.bottom-bar-foot {
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.left {
		margin-left: 10px;
		display: flex;
		align-items: center;
	}

	uni-image {
		width: 30px;
		height: 30px;
	}

	.bottom-bar-foot .center {
		font-size: 14px;
		padding: 5px 5px;
	}

	.bottom-bar-foot .center p {
		padding: 5px 5px;
	}

	.bottom-bar-foot .right {
		display: flex;
		justify-content: space-around;
	}

	.bottom-bar-foot .right button {
		padding-right: 9px;
	}

	.chooseBox {
		width: 100vw;
		padding: 0 14px 10px;
		background: #fff;
		bottom: 52px;
		margin-bottom: 10px;
	}

	.chooseBox .top {
		padding: 16px 7px;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.chooseBox .top .radio_cell.active {
		color: #ff3d00 !important;
		border: 1px solid #ff3d00 !important;
		background-color: #fdefef;
	}

	.chooseBox .top .radio_cell {
		width: 23%;
		height: 36px;
		line-height: 36px;
		margin: 3px;
		text-align: center;
		font-size: 13px;
		color: #3e4d6f;
		border: 1px solid #fff;
		background: #fff;
		float: left;
	}

	.freepass .radio_cell {
		border: 1px solid #bec1c9 !important;
		width: 21% !important;
		margin: 6px 5px !important;
	}
	 .bordered-table {
	    border-collapse: collapse;
	    width: 100%;
		font-size: 13px;
	  }
	  .bordered-table td {
	    border: 1px solid #ddd;
	    padding: 8px;
	    text-align: left;
	  }
</style>